feat(avatar): add pf-v6-avatar element#3139
Open
zeroedin wants to merge 5 commits intostaging/pfv6from
Open
Conversation
Port pf-v5-avatar to pf-v6-avatar with the following v6 API changes: - Replace `border` string attribute (light/dark) with boolean `bordered` attribute, matching React v6 `isBordered` prop - Drop `dark` boolean attribute (removed in v6 React) - Update all CSS custom property tokens from `--pf-v5-c-avatar--*` to `--pf-v6-c-avatar--*` matching the v6 SCSS source - Use v6 global tokens (`--pf-t--global--border--*`) for bordered variant - Simplify placeholder SVG to use `light-dark()` for automatic light/dark mode, replacing the separate dark boolean - Use private CSS custom properties (`--_*`) with public token fallback defaults at use sites - Remove default value from `alt` property to avoid sprouting attributes - Add `aria-hidden="true"` to placeholder SVG - Add `@cssprop` JSDoc for all public CSS custom properties - Export `AvatarSize` type union Demos match patternfly.org: basic, bordered, size-variations. Tests cover sizes (offsetWidth), load event, alt text (a11ySnapshot), bordered, and placeholder rendering. Closes #2979 Assisted-By: Claude Opus 4.6 <noreply@anthropic.com>
- Use `static styles = [style]` array form convention - Simplify render return type to TemplateResult - Change img/svg display from inline to block (prevents baseline gap) - Add placeholder avatar to basic demo - Add a11ySnapshot test for placeholder hidden from ax tree - Add size=md test case - Strengthen bordered test assertion (check border adds to size) - Add cem generate output path to config Assisted-By: Claude Opus 4.6 <noreply@anthropic.com>
|
Contributor
✅ Commitlint tests passed!More Info{
"valid": true,
"errors": [],
"warnings": [],
"input": "feat(avatar): add pf-v6-avatar element"
} |
Contributor
✅ Deploy Preview for patternfly-elements ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
Contributor
bennypowers
requested changes
May 10, 2026
Member
bennypowers
left a comment
bennypowers
left a comment
There was a problem hiding this comment.
needs a changeset
this isn't an 'add', it's an "update", so delete v5, and make the commit message feat(avatar)!: port to pf-v6-avatar
| @@ -1,5 +1,6 @@ | |||
| sourceControlRootUrl: https://github.com/patternfly/patternfly-elements/tree/main/ | |||
| generate: | |||
| output: ./elements/custom-elements.json | |||
| "./pf-v5-accordion/pf-v5-accordion.js": "./pf-v5-accordion/pf-v5-accordion.js", | ||
| "./pf-v5-alert/pf-v5-alert.js": "./pf-v5-alert/pf-v5-alert.js", | ||
| "./pf-v5-avatar/pf-v5-avatar.js": "./pf-v5-avatar/pf-v5-avatar.js", | ||
| "./pf-v6-avatar/pf-v6-avatar.js": "./pf-v6-avatar/pf-v6-avatar.js", |
Member
There was a problem hiding this comment.
we can probably remove all of these, since mappa handles trailing-slash exports
| * or a placeholder graphic. | ||
| * @summary Displays a user's avatar image | ||
| * @fires {PfV6AvatarLoadEvent} load - when the avatar image loads | ||
| * @cssprop {<length>} --pf-v6-c-avatar--Width - Width of the avatar |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
<pf-v6-avatar>web component for PatternFly v6srcis providedsize(sm/md/lg/xl),bordered,alt, andsrcattributesPfV6AvatarLoadEventwhen image loadslight-dark()fallbacksCloses #2979
Depends on #3130
Intentional divergences from React
<img>(withsrcdefaulting to empty string). Our web component renders an inline SVG placeholder whensrcis not provided, avoiding a network request and enabling CSS-based theming of the placeholder via--pf-t--global--background--color--200and--pf-t--global--icon--color--subtledesign tokens. This is a net-new feature not present in React.borderedattribute instead of React'sisBordered(nois-prefix per ADVICE.md)altis optional (defaults to""decorative image); React requiresalt: stringloadevent added (PfV6AvatarLoadEvent) — not in ReactTest plan
npm run testpasseslocalhost:8000with?rendering=chromelesssrcdisplays image; withoutsrcdisplays placeholder SVGaria-hidden="true")Assisted-By: Claude noreply@anthropic.com